<template>
	<view>
		<view class="bg-white">
			<cu-custom bgColor="bg-gradual-write" :isBack="true">
				<block slot="backText"></block>
				<block slot="content">我的会员卡</block>
			</cu-custom>
		</view>
		<my-card-package :list="list" v-if="total > 0"></my-card-package>
		<view v-else>
			<view class="bg-white margin-lr-lg radius-lg">
				<view class="margin-top-lg">
					<view>
						<u--text :bold="false" size="28" color="grey" text="我的会员卡" align="center" />
					</view>
					<view class="margin-top-lg flex justify-center">
						<image src="/other_pages/static/card_package.png" mode="aspectFit"></image>
					</view>
					<view class="margin-top-lg">
						<u--text :bold="true" size="26" color="grey" text="您还没有开通过时卡" align="center" />
					</view>
				</view>
			</view>
			<view class="margin-top-lg padding-lr-lg">
				<view>
					<u-button color="orange" size="large" @click="toCard" text="开通其他卡"></u-button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import MyCardPackage from '@/components/my-card-package/my-card-package.vue';
	export default {
		components: {
			MyCardPackage
		},
		data() {
			return {
				total: 0,
				list: []
			}
		},
		methods: {
			toCard() {
				uni.navigateTo({
					url: "/other_pages/recharge-card/recharge-card"
				})
			}
		},
		onLoad() {
			console.info('onLoad-list', this.$store.state.user.card)
			if (this.$store.state.user.card) {
				this.list = JSON.parse(this.$store.state.user.card)
				this.total = this.list.length
			} else {
				this.list = [];
			}
			console.info('onLoad-list', this.list, this.card, this.total)
		}
	}
</script>

<style lang="scss">
</style>